<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>教师管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui-src/dist/css/layui.css">
    <script src="https://cdn.jsdelivr.net/npm/layui-src/dist/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            display: flex;
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            height: 100vh;
        }
        .sidebar a {
            color: white;
            text-decoration: none;
            display: block;
            margin: 10px 0;
        }
        .content {
            flex-grow: 1;
            padding: 20px;
        }
        .search-box {
            margin-bottom: 20px;
        }
        .table-container {
            overflow-x: auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .actions a {
            margin-right: 10px;
            color: blue;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="sidebar">
    <h2>管理系统</h2>
    <a href="#">教师管理</a>
</div>
<div class="content">
    <h1>教师管理</h1>

    <!-- 搜索区域 -->
    <div class="layui-form search-box">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">教师姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="searchName" placeholder="请输入教师姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn" id="searchBtn">搜索</button>
                <button class="layui-btn layui-btn-normal" id="addTeacher">新增教师</button>
            </div>
        </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
        <table class="layui-hide" id="teacherTable" lay-filter="teacherTable"></table>
    </div>
</div>

<!-- 表格工具条模板 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
    layui.use(['table', 'form', 'layer', 'laydate'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var laydate = layui.laydate;

        // 初始化表格
        table.render({
            elem: '#teacherTable',
            url: '/api/getTeachers',
            cols: [[
                {field: 'id', title: '序号', width: 80, sort: true},
                {field: 'employeeNumber', title: '学工号', width: 120},
                {field: 'name', title: '姓名', width: 120},
                {field: 'gender', title: '性别', width: 80},
                {field: 'age', title: '年龄', width: 80, sort: true},
                {field: 'entryDate', title: '入职日期', width: 150},
                {field: 'modifyDate', title: '修改日期', width: 150},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]],
            page: true,
            limit: 10,
            limits: [10, 20, 30, 50]
        });

        // 搜索功能
        $('#searchBtn').on('click', function(){
            var searchName = $('input[name="searchName"]').val();
            table.reload('teacherTable', {
                where: {
                    name: searchName
                },
                page: {
                    curr: 1
                }
            });
        });

        // 监听工具条
        table.on('tool(teacherTable)', function(obj){
            var data = obj.data;
            if(obj.event === 'edit'){
                layer.open({
                    type: 1,
                    title: '修改教师信息',
                    area: ['500px', '450px'],
                    content: `
                            <div class="layui-form" lay-filter="editForm" style="padding: 20px;">
                                <input type="hidden" name="id" value="${data.id}">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">学工号</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="employeeNumber" required lay-verify="required" placeholder="请输入学工号" class="layui-input" value="${data.employeeNumber}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input" value="${data.name}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">性别</label>
                                    <div class="layui-input-block">
                                        <input type="radio" name="gender" value="1" title="男" ${data.gender === '1' ? 'checked' : ''}>
                                        <input type="radio" name="gender" value="2" title="女" ${data.gender === '2' ? 'checked' : ''}>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">年龄</label>
                                    <div class="layui-input-block">
                                        <input type="number" name="age" required lay-verify="required|number" placeholder="请输入年龄" class="layui-input" value="${data.age}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">入职日期</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="entryDate" id="editEntryDate" required lay-verify="required" placeholder="请选择入职日期" class="layui-input" value="${data.entryDate}">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-block">
                                        <button class="layui-btn" lay-submit lay-filter="editSubmit">提交</button>
                                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                    </div>
                                </div>
                            </div>
                        `,
                    success: function(layero, index){
                        form.render();
                        laydate.render({
                            elem: '#editEntryDate'
                        });

                        form.on('submit(editSubmit)', function(data){
                            $.ajax({
                                url: '/api/updateTeacher',
                                type: 'POST',
                                contentType: 'application/json',
                                dataType: 'json',
                                data: JSON.stringify(data.field),
                                success: function(res){
                                    if(res.code === 0){
                                        layer.msg('修改成功');
                                        layer.close(index);
                                        table.reload('teacherTable');
                                    }else{
                                        layer.msg(res.msg || '修改失败');
                                    }
                                }
                            });
                            return false;
                        });
                    }
                });
            } else if(obj.event === 'del'){
                layer.confirm('确定要删除该教师信息吗？', function(index){
                    $.ajax({
                        url: '/api/deleteTeacher',
                        type: 'POST',
                        contentType: 'application/json',
                        dataType: 'json',
                        data: JSON.stringify({id: data.id}),
                        success: function(res){
                            if(res.code === 0){
                                layer.msg('删除成功');
                                table.reload('teacherTable');
                            }else{
                                layer.msg(res.msg || '删除失败');
                            }
                        }
                    });
                    layer.close(index);
                });
            }
        });

        // 新增教师
        $('#addTeacher').on('click', function(){
            layer.open({
                type: 1,
                title: '新增教师',
                area: ['500px', '450px'],
                content: `
                        <div class="layui-form" lay-filter="addForm" style="padding: 20px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">学工号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="employeeNumber" required lay-verify="required" placeholder="请输入学工号" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="gender" value="1" title="男" checked>
                                    <input type="radio" name="gender" value="2" title="女">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄</label>
                                <div class="layui-input-block">
                                    <input type="number" name="age" required lay-verify="required|number" placeholder="请输入年龄" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">入职日期</label>
                                <div class="layui-input-block">
                                    <input type="text" name="entryDate" id="addEntryDate" required lay-verify="required" placeholder="请选择入职日期" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="addSubmit">提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </div>
                    `,
                success: function(layero, index){
                    form.render();
                    laydate.render({
                        elem: '#addEntryDate'
                    });

                    form.on('submit(addSubmit)', function(data){
                        $.ajax({
                            url: '/api/addTeacher',
                            type: 'POST',
                            contentType: 'application/json',
                            dataType: 'json',
                            data: JSON.stringify(data.field),
                            success: function(res){
                                if(res.code === 0){
                                    layer.msg('添加成功');
                                    layer.close(index);
                                    table.reload('teacherTable');
                                }else{
                                    layer.msg(res.msg || '添加失败');
                                }
                            }
                        });
                        return false;
                    });
                }
            });
        });
    });
</script>
</body>
</html>